<template>
  <div class="house-details">
    <div class="top-bar">
      <div class="breadcrumb-nav">
        <span class="nav-item" @click="navigateTo('/')">租享无忧</span>
        <span class="nav-separator">></span>
        <span class="nav-item" @click="navigateTo('/', {district: house.district})">{{ house.district || '全部' }}租房</span>
        <span class="nav-separator">></span>
        <span class="nav-item" @click="navigateTo('/', {price: getPriceRange(house.monthly_rent)})">{{ getPriceRangeText(house.monthly_rent) }}</span>
        <span class="nav-separator">></span>
        <span class="nav-item" @click="navigateTo('/', {keyword: house.address})">{{ house.address || '地华梅溪湖鲜' }}租房</span>
      </div>
    </div>
    <el-row :gutter="32" class="main-row">
      <!-- 左侧：标题、元信息、完整大图 -->
      <el-col :span="14">
        <div class="left-panel card-float">
          <div class="house-title-block">
            <div class="title-meta-row">
              <h2 class="house-title">{{ house.description }}</h2>
              <div class="house-meta">
                <span>房源编号：{{ house.house_id }}</span>
                <span>&emsp;</span>
                <span>更新时间：{{ updateTime }}</span>
                </div>
            </div>
          </div>
          <div class="main-image-wrapper">
            <el-image
              class="main-image"
              :src="formatImageUrl(house.photo_url)"
              :srcset="formatImageUrl(house.photo_url) + ' 1x, ' + formatImageUrl(house.photo_url) + ' 2x'"
              fit="cover"
              :preview-src-list="[formatImageUrl(house.photo_url)]"
              preview-teleported
            >
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                  <span>暂无图片</span>
                </div>
              </template>
            </el-image>
          </div>
        </div>
      </el-col>
      <!-- 右侧：房屋信息、房东信息、功能按钮 -->
      <el-col :span="10">
        <div class="info-panel card-float">
          <el-descriptions title="基本信息" :column="1" border class="main-desc">
            <el-descriptions-item label="💰 租金"><span class="desc-content">{{ house.monthly_rent }} 元/月</span></el-descriptions-item>
            <el-descriptions-item label="🛏️ 户型"><span class="desc-content">{{ house.house_type }}</span></el-descriptions-item>
            <el-descriptions-item label="📐 面积"><span class="desc-content">{{ house.floor_area }} ㎡</span></el-descriptions-item>
            <el-descriptions-item label="🧭 朝向"><span class="desc-content">{{ house.orientation }}</span></el-descriptions-item>
            <el-descriptions-item label="🛠️ 装修"><span class="desc-content">{{ house.decoration }}</span></el-descriptions-item>
            <el-descriptions-item label="🏷️ 出租方式"><span class="desc-content">{{ house.rental_method }}</span></el-descriptions-item>
            <el-descriptions-item label="📋 状态"><span class="desc-content">{{ house.status }}</span></el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="位置信息" :column="1" border class="main-desc">
            <el-descriptions-item label="📍 区域"><span class="desc-content">{{ house.district }}</span></el-descriptions-item>
            <el-descriptions-item label="🏠 地址"><span class="desc-content">{{ house.address }}</span></el-descriptions-item>
          </el-descriptions>
          <div class="landlord-section">
            <el-avatar size="large" class="landlord-avatar-letter">
              <span class="avatar-letter">{{ landlordInfo.name ? landlordInfo.name[0] : '' }}</span>
            </el-avatar>
            <div class="landlord-info">
              <div>房东名：{{ landlordInfo.name }}</div>
            </div>
            <el-image
              v-if="landlordInfo.qrcode"
              :src="landlordInfo.qrcode"
              style="width: 80px; height: 80px; margin-left: 16px; border-radius: 10px; border: 1px solid #e3eaf3;"
            />
          </div>
          <div class="house-actions">
          <el-button type="primary" @click="handleShowPhone" class="action-button">
            {{ showPhoneOnBtn ? landlordInfo.phone : '查看电话号码' }}
          </el-button>
          <el-button
            :type="isCollected ? 'danger' : 'primary'"
            @click="toggleCollect"
            class="action-button"
          >
            {{ isCollected ? '取消收藏' : '收藏' }}
          </el-button>
          <el-button 
            v-if="!isCurrentUserLandlord" 
            type="primary" 
            @click="chatWithLandlord"
            class="action-button"
          >
            <el-icon style="vertical-align: middle; margin-right: 4px;">
              <ChatDotRound />
            </el-icon>
            与房东聊天
          </el-button>
          <el-button 
            :type="hasAppointment ? 'warning' : 'primary'" 
            @click="showAppointmentDialog"
            :icon="hasAppointment ? 'Calendar' : 'Plus'"
            class="action-button"
          >
            {{ hasAppointment ? '取消预约' : '预约看房' }}
          </el-button>
            <!-- 申请租房按钮 -->
            <el-button 
              v-if="!isCurrentUserLandlord && house.status === '闲置'" 
              type="primary" 
              @click="applyForRent">
              <el-icon style="vertical-align: middle; margin-right: 4px;">
                <Key />
              </el-icon>
              申请租房
            </el-button>
          <!-- 预约弹窗 -->
          <el-dialog
            v-model="appointmentDialogVisible"
            :title="hasAppointment ? '修改预约' : '预约看房'"
            width="400px"
            center
            destroy-on-close
            :modal-class="'appointment-dialog'"
            :close-on-click-modal="false"
            :append-to-body="true"
            :lock-scroll="true"
          >
            <div class="appointment-dialog-content">
              <el-form 
                :model="appointmentForm"
                label-position="top"
                :rules="appointmentRules"
                ref="appointmentFormRef"
              >
                <el-form-item 
                  label="预约时间" 
                  prop="appointment_time"
                  :rules="[{ required: true, message: '请选择预约时间', trigger: 'change' }]"
                >
                  <el-date-picker
                    v-model="appointmentForm.appointment_time"
                    type="datetime"
                    placeholder="选择预约时间"
                    :disabled-date="disabledDate"
                    :disabled-hours="disabledHours"
                    format="YYYY-MM-DD HH:mm"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    class="w-full"
                  />
                </el-form-item>
              </el-form>

              <div v-if="hasAppointment" class="current-appointment-info">
                <el-alert
                  title="当前预约信息"
                  type="info"
                  :closable="false"
                >
                  <p>预约时间：{{ formatDateTime(currentAppointment?.appointment_time) }}</p>
                  <p>预约状态：{{ getStatusText(currentAppointment?.status) }}</p>
                </el-alert>
              </div>
            </div>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="appointmentDialogVisible = false">取消</el-button>
                <el-button 
                  v-if="hasAppointment" 
                  type="danger" 
                  @click="confirmCancelAppointment"
                  :loading="loading"
                >取消预约</el-button>
                <el-button 
                  type="primary" 
                  @click="submitAppointment"
                  :loading="loading"
                >{{ hasAppointment ? '修改预约' : '确认预约' }}</el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 取消预约确认弹窗 -->
          <el-dialog
            v-model="cancelConfirmVisible"
            title="确认取消预约"
            width="300px"
            center
            :modal-class="'appointment-dialog'"
            :close-on-click-modal="false"
          >
            <p>确定要取消当前预约吗？</p>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="cancelConfirmVisible = false">返回</el-button>
                <el-button type="danger" @click="cancelAppointment" :loading="loading">确认取消</el-button>
              </div>
            </template>
          </el-dialog>


  </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import { ref, computed,onMounted ,reactive} from 'vue'
import { useRoute,useRouter } from 'vue-router'
import axios from 'axios'
import { Picture, ChatDotRound, Key } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const house = ref({})
const updateTime = ref(' ')
const isCollected = ref(false)
const appointmentDialogVisible = ref(false)
const cancelConfirmVisible = ref(false)
const appointmentFormRef = ref(null)
const loading = ref(false)
const hasAppointment = ref(false)
const currentAppointment = ref(null)
const appointmentForm = reactive({
  appointmentTime: ''
})

// 表单验证规则
const appointmentRules = {
  appointment_time: [
    { required: true, message: '请选择预约时间', trigger: 'change' }
  ]
}
// 查询当前用户对这个房源的预约状态
const checkAppointmentStatus = async () => {
  try {
    const response = await axios.get(`/appointment/client/${localStorage.getItem('userId')}`)
    if (response.data.code === 200) {
      const appointments = response.data.data
      const appointment = appointments.find(a => 
        a.house_id === house.house_id && 
        [0, 1].includes(a.status) // 只查找待处理或已接受的预约
      )
      if (appointment) {
        hasAppointment.value = true
        currentAppointment.value = appointment
        appointmentForm.appointment_time = appointment.appointment_time
      } else {
        hasAppointment.value = false
        currentAppointment.value = null
      }
    }
  } catch (error) {
    console.error('查询预约状态失败:', error)
  }
}

// 显示预约弹窗
const showAppointmentDialog = () => {
  if (hasAppointment.value) {
    appointmentForm.appointment_time = currentAppointment.value.appointment_time
  } else {
    appointmentForm.appointment_time = ''
  }
  appointmentDialogVisible.value = true
}
// 确认取消预约
const confirmCancelAppointment = () => {
  cancelConfirmVisible.value = true
}


// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now()
}

// 禁用非工作时间
const disabledHours = () => {
  const hours = []
  for (let i = 0; i < 24; i++) {
    if (i < 9 || i > 18) hours.push(i)
  }
  return hours
}

/// 取消预约
const cancelAppointment = async () => {
  if (!currentAppointment.value) return
  
  loading.value = true
  try {
    const response = await axios.put(`/appointment/cancel/${currentAppointment.value.appointment_id}`)
    if (response.data.code === 200) {
      ElMessage.success('取消预约成功')
      cancelConfirmVisible.value = false
      appointmentDialogVisible.value = false
      hasAppointment.value = false
      currentAppointment.value = null
      appointmentForm.appointment_time = ''
    } else {
      ElMessage.error(response.data.message || '取消预约失败')
    }
  } catch (error) {
    ElMessage.error('取消预约失败：' + error.message)
  } finally {
    loading.value = false
  }
}


// 提交预约
const submitAppointment = async () => {
  if (!appointmentFormRef.value) return
  
  await appointmentFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    loading.value = true
    try {
      let response
      // const appointmentData = {
      //   client_id: localStorage.getItem('userId'),
      //   house_id: house.house_id,
      //   landlord_id: house.landlord_id,
      //   appointment_time: appointmentForm.appointment_time
      // }

      if (hasAppointment.value) {
        // 如果是修改预约，先取消原有预约
        await axios.put(`/appointment/cancel/${currentAppointment.value.appointment_id}`)
      }
      
      // 创建新预约
      response = await axios.post('/appointment/create', {
          client_id: parseInt(localStorage.getItem('userId')),  // 本地存储是字符串，要转换成 int
          house_id: route.params.houseid,
          landlord_id: house.value.landlord_id,
          appointment_time: appointmentForm.appointment_time// 确保格式为 'YYYY-MM-DD HH:mm:ss'
        })

      if (response.data.code === 200) {
        ElMessage.success(hasAppointment.value ? '修改预约成功' : '预约成功')
        appointmentDialogVisible.value = false
        await checkAppointmentStatus() // 刷新预约状态
      } else {
        ElMessage.error(response.data.message || '预约失败')
      }
    } catch (error) {
      ElMessage.error((hasAppointment.value ? '修改' : '创建') + '预约失败：' + error.message)
    } finally {
      loading.value = false
    }
  })
}

// 格式化日期时间
const formatDateTime = (datetime) => {
  if (!datetime) return ''
  const date = new Date(datetime)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}
// 获取预约状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待处理',
    1: '已接受',
    2: '已拒绝',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 检查是否已收藏
async function checkCollectionStatus() {
  try {
    const response = await axios.get('/collect/check', {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
      params: {
        user_id: localStorage.getItem('userId'),
        house_id: route.params.houseid
      }
    })
    isCollected.value = response.data.is_collected
  } catch (error) {
    console.error('检查收藏状态失败:', error)
  }
}

// 切换收藏状态
async function toggleCollect() {
  try {
    console.log('当前收藏状态:', isCollected.value)
    console.log('当前用户ID:', localStorage.getItem('userId'))
    console.log('房源ID:', route.params.id)
    const url = isCollected.value ? '/collect/cancel' : '/collect/add'
    const response = await axios.post(url, {
      user_id: localStorage.getItem('userId'),
      house_id: route.params.houseid
    }, {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
    })
    console.log('操作结果:', response.data)
    if (response.data.status === 200) {
      isCollected.value = !isCollected.value
      ElMessage.success(isCollected.value ? '收藏成功' : '取消收藏成功')
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败')
  }
}

// 导航方法
const navigateTo = (path, params = {}) => {
  // 清除之前可能存在的筛选条件
  localStorage.removeItem('filterDistrict')
  localStorage.removeItem('filterPriceRange')
  localStorage.removeItem('filterKeyword')
  
  // 设置新的筛选条件
  if (params.district) {
    localStorage.setItem('filterDistrict', params.district)
  }
  
  if (params.price) {
    localStorage.setItem('filterPriceRange', params.price)
  }
  
  if (params.keyword) {
    localStorage.setItem('filterKeyword', params.keyword)
  }
  
  // 设置标志，表示是从详情页跳转过来的
  localStorage.setItem('fromDetails', 'true')
  
  // 跳转到首页
  router.push('/house')
}

// 根据租金获取价格区间
const getPriceRange = (rent) => {
  if (!rent) return '全部'
  const rentNum = Number(rent)
  if (rentNum <= 3000) return '3000以下'
  if (rentNum <= 5000) return '3000-5000元'
  if (rentNum <= 8000) return '5000-8000元'
  if (rentNum <= 12000) return '8000-12000元'
  return '12000元以上'
}

// 获取价格区间文本
const getPriceRangeText = (rent) => {
  return getPriceRange(rent) + (rent ? '租房' : '')
}

//const house = ref({})
//const updateTime = ref(' ') 
// const currentUserId = ref(JSON.parse(localStorage.getItem('userInfo'))?.user_id)
const currentUserId = ref(null)

onMounted(() => {
  const userInfo = localStorage.getItem('userInfo')
  if (userInfo) {
    try {
      checkAppointmentStatus()
      const parsed = JSON.parse(userInfo)
      currentUserId.value = parsed?.user_id
    } catch (error) {
      console.error('解析用户信息失败:', error)
      ElMessage.error('获取用户信息失败')
    }
  }
})
// 图片路径格式化
const formatImageUrl = (url) => {
  if (!url) return 'https://via.placeholder.com/800x600?text=暂无图片'
  if (url.includes('house-img')) {
    const filename = url.split(/[/\\]/).pop()
    return `http://127.0.0.1:5000/static/house-img/${filename}`
  }
  return url
}

const landlordInfo = ref({
  name: '',
  phone: '',
  avatar: '',
  qrcode: 'https://u.fang.com/qrcode.php?url=https%3A%2F%2Fm.fang.com%2Fzf%2Fcs%2FAGT_157349653.html%3Fbid%3D19594683%26houseid%3D157349653%26sourcePage%3Dzf_fy%5Exq_pc%26productType%3D43%26businessType%3D1%26sourcePlat%3Dpc%26sourceUrl%3Dhttps%3A%2F%2Fcs.zu.fang.com%2Fchuzu%2F3_157349653_1.htm%3Fchannel%3D1%2C2%26source_page%3D1&type=rent&resize=130'
})
const showPhone = ref(false)
const showPhoneOnBtn = ref(false)

onMounted(async () => {
  checkCollectionStatus()

  const now = new Date()
  const yyyy = now.getFullYear()
  const mm = String(now.getMonth() + 1).padStart(2, '0')
  const dd = String(now.getDate()).padStart(2, '0')
  updateTime.value = `${yyyy}-${mm}-${dd}`

  const houseid = route.params.houseid || 1
  try {
    const { data } = await axios.get(`http://127.0.0.1:5000/api/houses/getHouseDetails/${houseid}`)
    house.value = data
    landlordInfo.value.name = data.landlord_name
    landlordInfo.value.phone = data.landlord_phone
  } catch (error) {
    console.error('请求房屋详情失败:', error)
  }
})

function collectHouse() {
  ElMessage.success('收藏成功！')
}

// 判断当前用户是否为房东
const isCurrentUserLandlord = computed(() => {
  return house.value && currentUserId.value === house.value.landlord_id
})

async function chatWithLandlord() {
  if (!house.value.landlord_id || !house.value.house_id) {
    ElMessage.error('房源信息不完整，请稍后重试')
    return
  }
  
  try {
    router.push({
      path: '/chat',
      query: {
        partner_id: house.value.landlord_id,
        house_id: house.value.house_id
      }
    })
  } catch (error) {
    console.error('跳转失败:', error)
    ElMessage.error('跳转失败，请稍后重试')
  }
}

function handleShowPhone() {
  showPhoneOnBtn.value = true
}

// 申请租房
const applyForRent = () => {
  // 检查用户是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  
  // 跳转到租房申请页面
  router.push(`/rent-application/${house.value.house_id}`)
}
</script>

<style>
.house-details {
  padding: 32px;
  background: #f5f7fa;
  border-radius: 18px;
  min-height: 100vh;
  box-shadow: 0 8px 32px rgba(25,118,210,0.08);
}
.top-bar {
  width: 100%;
  height: auto;
  padding: 12px 20px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, #1976d2 0%, #64b5f6 100%);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  color: white;
  font-size: 14px;
  flex-wrap: wrap;
}

.nav-item {
  cursor: pointer;
  transition: opacity 0.2s;
}

.nav-item:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.nav-separator {
  margin: 0 8px;
  opacity: 0.8;
}
.main-row {
  margin-top: 0;
}
.left-panel, .info-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(25,118,210,0.06);
  padding: 24px;
  min-height: 680px;
  transition: box-shadow 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
  height: 90%; /* 确保高度一致 */
}
.card-float:hover {
  box-shadow: 0 8px 32px rgba(25,118,210,0.13);
  transform: translateY(-4px) scale(1.01);
}
.house-title-block {
  /* text-align: center; */
  margin-bottom: 18px;
}
.title-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.house-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0;
  text-align: center;
  flex: 1;
  padding-right: 20px; /* 添加右侧内边距，使标题整体向中间偏移 */
}
.house-meta {
  color: #888;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: right;
  white-space: nowrap;
  min-width: 240px; /* 设置最小宽度，确保元信息有足够空间 */
}
.main-image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: #fafafa;
  border-radius: 12px;
  overflow: hidden;
  
}
.main-image {
  width: 100%;
  height: 100%;
  max-width: 760px;
  max-height: 480px;
  border-radius: 12px;
  box-shadow: 0 2px 12px #eee;
  object-fit: cover;
  background: #fafafa;
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s;
  image-rendering: auto;
}

/* 鼠标悬停时浮动放大效果 */
.main-image:hover {
  transform: scale(1.06) translateY(-8px);
  box-shadow: 0 12px 32px rgba(25, 118, 210, 0.18);
}

.main-desc {
  margin-bottom: 3px;
  width: 100%;
  font-size: 15px;
  border-radius: 8px;
  overflow: hidden;
}
.el-descriptions__title {
  font-size: 20px!important;
  letter-spacing: 1.5px;
  color: #1976d2;
  font-weight: bold;
}
.main-desc .el-descriptions__label {
  font-weight: bold !important;
  font-size: 16px !important;
  letter-spacing: 1.5px;
  color: #1976d2 !important;
  background: #f6faff !important;
  vertical-align: middle;
  transition: background 0.2s;
}
.main-desc .el-descriptions__content {
  font-size: 15px !important;
  color: #222 !important;
  text-align: left !important;
  vertical-align: middle;
  padding-left: 2px;
}
.desc-content {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.main-desc .el-descriptions-row {
  line-height: 1.8;
  transition: background 0.2s;
}
.main-desc .el-descriptions-row:hover {
  background: #f0f7ff;
}
.landlord-section {
  display: flex;
  align-items: center;
  margin: 24px 0 18px 0;
  gap: 18px;
}
.landlord-info {
  margin-left: 14px;
  font-size: 18px;
  color: black;
}
.house-actions {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 增加按钮之间的间隙 */
  align-items: stretch; /* 确保按钮填满整个宽度并对齐 */
  margin-top: 20px;
  padding: 0 20px;
}
.action-button {
  width: 100%;
  height: 40px;
  margin: 0;
  border-radius: 20px;
}
/* 确保图标垂直居中 */
.action-button :deep(.el-icon) {
  vertical-align: middle;
}
.button-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.button-row .el-button {
  flex: 1;
  min-width: 120px;
}
.house-actions .el-button {
  font-size: 18px;
  min-width: 120px;
  height: 44px;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(25,118,210,0.08);
  transition: all 0.25s cubic-bezier(.25,.8,.25,1);
  width: 100%; /* 确保按钮填满整个宽度 */
}
.house-actions .el-button:last-child {
  margin-right: 0;
}
.house-actions .el-button:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 24px rgba(25,118,210,0.18);
  filter: brightness(1.08);
}
.image-placeholder {
  width: 100%;
  height: 100%;
  color: #bbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

:deep(.el-image-viewer__img) {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.appointment-dialog-content {
  padding: 20px 0;
}

.current-appointment-info {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

.w-full {
  width: 100%;
}

.landlord-avatar-letter {
  background-color: #1976d2; /* 设置头像背景为蓝色 */
  color: white; /* 文字颜色为白色 */
  font-size: 28px; /* 增大字母的字体 */
  font-weight: bold; /* 增加字母的粗体 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* 固定弹窗位置 */
:deep(.appointment-dialog) {
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.el-dialog) {
  margin: 0 auto !important;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
/* 响应式优化 */
@media (max-width: 900px) {
  .el-row {
    flex-direction: column !important;
  }
  .left-panel, .info-panel {
    margin-bottom: 18px;
    padding: 12px;
    width: 100% !important;
    box-sizing: border-box;
    min-height: unset;
  }
  .info-panel {
    align-items: center !important;
    width: 100% !important;
  }
  .landlord-section {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
  }
  .house-actions {
    justify-content: center !important;
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .house-actions .el-button {
    margin-right: 0;
    margin-bottom: 10px;
    min-width: 110px;
    width: 90%;
    max-width: 320px;
  }
  .main-image-wrapper {
    min-height: 220px;
  }
  .main-image {
    max-width: 100vw;
    max-height: 220px;
  }
}
</style>